<template>
    <div class="map" ref="map"></div>
</template>

<script setup lang="ts">
import axios from 'axios';
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue'

const map = ref()

onMounted(() => {
    var mycharts = echarts.init(map.value);
    axios.get("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json").then(res => {
        console.log(res);
        echarts.registerMap('china', res.data);

        const option = {
            visualMap: {
                min: 800,
                max: 50000,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                }
            },
            series: [
                {
                    type: 'map',
                    map: 'china',
                    top: "25%",
                    zoom: 1.2,
                    label: {
                        show: true,
                        color: "#fff"
                    },
                    itemStyle: {
                        areaColor: "#00baff"
                    },
                    emphasis: {
                        itemStyle: {
                            areaColor: "#ffc4ff"
                        }
                    },
                    roam: true,
                    data: [
                        {
                            name: "黑龙江省",
                            value: 609
                        }
                    ]
                }
            ],
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (人)'
            },
            geo: [
                {
                    type: 'map',
                    map: 'china',
                    top: "25%",
                    zoom: 1.2,
                    label: { show: false },
                    itemStyle: {
                        areaColor: "#00baff",
                        shadowColor: 'rhba(0,0,0,0.5)',
                        shadowBlur: 10,
                        shadowOffsetX: 10,
                        shadowOffsetY: 10,
                        borderWidth: 0
                    },
                    left: "10%",
                    top: "26%",
                    emphasis: {
                        itemStyle: {
                            areaColor: "#ffc4ff"
                        }
                    },
                    roam: true
                }
            ]
        }
        mycharts.setOption(option)
    })

})



</script>

<style lang="scss" scoped>
.map {
    width: 100%;
    height: 100%;
}
</style>